<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    // 需求 通过js或jQuery获取到三个div 并且修改他们的背景颜色
    // 通过比较JS原生DOM和jQuery
    // JS原生DOM
    window.onload = function () {
      // 1.利用原生JS来查找DOM元素
      var div1 = document.getElementsByTagName('div')[0]
      var div2 = document.getElementsByClassName('box1')[0]
      var div3 = document.getElementById('box2')
      // console.log(div1);
      // console.log(div2);
      // console.log(div3);
    // 2.利用原生JS修改背景颜色
    // div1.style.backgroundColor = 'red'
    // div2.style.backgroundColor = 'yellow'
    // div3.style.backgroundColor = 'blue'
    }

    // jQuery
    $(function () {
      // 1.使用jQuery查找元素
      var $div1 = $('div:first') //获取第一个div元素
      var $div2 = $('.box1')
      var $div3 = $('#box2')
      // console.log($div1);
      // console.log($div2);
      // console.log($div3);
      // 2.设置背景颜色
      $div1.css({
        backgroundColor: 'red'
      })
      $div2.css({
        backgroundColor: 'yellow',
        width: '200px',
        height: '200px'
      })
      $div3.css({
        backgroundColor: 'blue'
      })
    })
  </script>
</head>
<body>
  <div></div>
  <div class="box1"></div>
  <div id="box2"></div>
</body>
</html>